import React, { useEffect, useState } from "react";
import { Link, Switch, Route } from "react-router-dom";

// todo useEffect用于处理副作用，代替生命周期
// todo useEffect没有返回值，里面需要传入一个函数作为参数

// todo 如果useEffect里面只传入了一个函数，相当于类组件的componentDidMount和componentDidUpdate
// todo useEffect还可以接收第二个参数，是一个数组（依赖数组）
// todo 如果第二个参数是空数组，相当于类组件的componentDidMount
// todo 如果第二个参数有内容，相当于vue的watch
// todo 如果第一个函数参数里面返回一个函数，相当于类组件的componentWillUnmount

const getData = () => {
  return fetch("http://www.pudge.wang:3080/api/rated/list")
    .then((response) => response.json())
    .then((res) => {
      return res;
    });
};

const App = () => {
  const [count, setCount] = useState(1);
  // useEffect(() => {
  //   console.log(count);
  // }, [count]);

  const [num, setNum] = useState(10);
  // useEffect(() => {
  //   return () => {
  //     console.log(246);
  //   };
  // }, []);

  // useEffect(() => {
  //   const timer = setInterval(() => {
  //     console.log(123);
  //   }, 1000);

  //   return () => {
  //     clearInterval(timer);
  //   };
  // }, []);

  useEffect(() => {
    // getData().then((res) => {
    //   console.log(res);
    // });

    // todo 在useEffect里面使用async的方式请求封装好的接口，需要写函数自执行
    (async () => {
      const res = await getData();
      console.log(res);
    })();
  }, []);

  const fn = () => {
    setCount((v) => v + 1);
  };
  const fn2 = () => {
    setNum((v) => v * 2);
  };

  return (
    <>
      <h2>useEffect</h2>
      <p>{count}</p>
      <button onClick={fn}>btn</button>
      <p>{num}</p>
      <button onClick={fn2}>btn2</button>
    </>
  );
};

const Mine = () => {
  return <div>这是我的组件</div>;
};

const Index = () => {
  return (
    <>
      <ul>
        <li>
          <Link to="/app">app</Link>
        </li>
        <li>
          <Link to="/mine">mine</Link>
        </li>
      </ul>

      <hr />

      <Switch>
        <Route path="/app">
          <App />
        </Route>
        <Route path="/mine">
          <Mine />
        </Route>
      </Switch>
    </>
  );
};

export default Index;
